<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>商品分析</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/product-analysis' }">商品优化分析</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/product-analysis-details' }">新增优化商品</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="abnormal-page">
      <div class="statistic">
        <div class="item">
          <div class="name">设备名称:</div>
          <div class="value">新颜路1号</div>
        </div>
        <div class="item">
          <div class="name">设备编号:</div>
          <div class="value">556</div>
        </div>
        <div class="item">
          <div class="name">路线:</div>
          <div class="value">路线1</div>
        </div>
        <div class="item">
          <div class="name">补货员:</div>
          <div class="value">13306236880</div>
        </div>
        <div class="item">
          <div class="name">7天日均销售额:</div>
          <div class="value">¥ 656.00个</div>
        </div>
      </div>
      <div class="title2">
        <div>
          <el-button :icon="RefreshLeft" round @click="$router.push('/product-analysis-look')">返回</el-button>
        </div>
        <div>
          <span class="c0000FF">调整后容量大于0，请确认</span>
          <span>当前设备总容量：0；调整后总容量：42</span>
          <el-button round color="#0071bb" style="margin-left: 10px;">全部容量清零</el-button>
        </div>
      </div>
      <div class="content-box">
        <div class="right">
          <el-tabs v-model="activeTab" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane :label="v.label" :name="v.value" v-for="(v,i) of Tab" :key="i">
              <div class="tables">
                <el-table :data="rightTable" style="width: 100%" height="500px">
                  <el-table-column prop="img" label="商品图片">
                    <template #default="scope">
                      <img class="goods_img" :src="scope.row.img" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="商品名称" />
                  <el-table-column prop="kc" label="库存" />
                  <el-table-column prop="btn" label="操作">
                    <template #default="scope">
                      <el-button
                        size="small"
                        :disabled="scope.row.btn==1?true:false"
                        :color="scope.row.btn==1?'#c1c1c1':'#0071bb'"
                      >添加</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="left">
          <div class="tables">
            <el-table :data="tableData" style="width: 100%" height="460px">
              <el-table-column prop="img" label="商品图片">
                <template #default="scope">
                  <img class="goods_img" :src="scope.row.img" />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称" />
              <el-table-column prop="code" label="商品条码" />
              <el-table-column prop="time" label="上架时长" />
              <el-table-column prop="xl" label="近7日销量" />
              <el-table-column prop="pn" label="近7日复购人数" />
              <el-table-column prop="money" label="近7日毛利率" />
              <el-table-column prop="kc" label="当前容量"></el-table-column>
              <el-table-column prop="jy" label="建议" />

              <el-table-column prop="kc2" label="调整后容量">
                <template #default="scope">
                  <div class="round-box">{{scope.row.kc2}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="check" label="计划优化方案">
                <template #default="scope">
                  <div class="check-text">{{scope.row.check}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="delect" label="操作">
                <div class="delect-text">删除</div>
              </el-table-column>
            </el-table>
          </div>
          <div class="statistic p-4">
            <div class="value2">调整前</div>
            <div class="box-group">
              <div>
                <div class="b-1">商品总容量</div>
                <div>2</div>
              </div>
              <div>
                <div class="b-1">设备容量</div>
                <div>42</div>
              </div>
              <div>
                <div class="b-1">饮料种类</div>
                <div>8</div>
              </div>
              <div>
                <div class="b-1">零食种类</div>
                <div>12</div>
              </div>
              <div>
                <div class="b-1">预估毛利率</div>
                <div>2</div>
              </div>
            </div>
            <el-icon style="color: #f6921e; font-size: 28px;">
              <CaretRight />
            </el-icon>

            <div class="value2">调整后</div>
            <div class="box-group">
              <div>
                <div class="b-1">商品总容量</div>
                <div>2</div>
              </div>
              <div>
                <div class="b-1">设备容量</div>
                <div>42</div>
              </div>
              <div>
                <div class="b-1">饮料种类</div>
                <div>8</div>
              </div>
              <div>
                <div class="b-1">零食种类</div>
                <div>12</div>
              </div>
              <div>
                <div class="b-1">预估毛利率</div>
                <div>2</div>
              </div>
            </div>
            <div class="big-box">
              <div class="flex-sb">
                <span>请注意调整后:</span>
                <span class="c0000FF">修改设备容积</span>
              </div>
              <div>商品总容积/设备容积：56/42</div>
              <div class="flex-sb">
                <el-button color="#f6921e" round size="small" class="save">保存</el-button>
                <el-button round size="small">取消</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { RefreshLeft,CaretRight } from "@element-plus/icons-vue";
import type { TabsPaneContext } from "element-plus";
const rightTable =[{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100",
  btn:1
},{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100",
  btn:1
},{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100",
  btn:1
},{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100"
},{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100"
},{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100"
},{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100"
},{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100"
},{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100"
},{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  kc:"100"
}]
const Tab=[{
  label:"热销饮料",
  value:1
},{
  label:"热销零食",
  value:2
},{
  label:"全部商品",
  value:3
},]

const tableData = [
  {
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
{
  img:
  "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  name:"怡宝菊花茶瓶装450ml",
  code:"85151213232222",
  time:"20天",
  xl:"10",
  pn:"10",
  money:"100",
  kc:"100",
  jy:"建议下架",
  kc2:"2",
  check:"下架"
},
];

const activeTab = ref(1);
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
  // 在此修改表格数据
};
</script>

<style lang="scss" scoped>
.abnormal-page {
  background-color: #fff;
  margin-top: 10px;
  padding: 10px;
  .c0000FF {
    color: #0000ff;
    margin-right: 10px;
  }

  .statistic {
    width: 100%;
    border-radius: 20px;
    padding: 24px 10px;
    display: flex;
    background: #0071bb;
    align-items: center;
    font-size: 12px;
    color: #4d4d4d;
    .item {
      width: 25%;
      color: #fff;
      text-align: left;
      border-right: 1px solid #fff;
      padding: 0 20px;
      box-sizing: border-box;
    }
    .item:last-child {
      border-right: none;
    }
    .value {
      font-size: 24px;
      // margin-left: 20px;
      font-weight: 500;
      color: #fff;
    }
    .value2 {
      font-size: 18px;
      color: #fff;
      margin-right: 4px;
    }

    .box-group {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > div {
        background: #ffffff;
        border: 1px solid #ccc;
        text-align: center;
        margin-right: 10px;
        padding: 0px 4px;
        .b-1 {
          border-bottom: 1px solid #ccc;
        }
      }
    }
    .big-box {
      width: 160px;
      background: #ffffff;
      border: 1px solid #ccc;
      text-align: center;
      padding: 0px 4px;
      font-size: 10px;
      padding: 4px 10px;
      border-radius: 10px;
      > div {
        margin-bottom: 4px;
      }
      .save {
        color: #fff;
      }
    }
  }
  .p-4 {
    padding: 10px;
  }
  .flex-sb {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .title2 {
    // background: #d9d9d9;
    color: #4d4d4d;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0px 20px;
    margin: 10px 0px;
  }
  .content-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right {
      width: 25%;
    }
    .left {
      width: 74%;
      .tables {
        border: 1px solid #ccc;
        margin-bottom: 2px;
        .check-text {
          color: #0071bb;
          cursor: pointer;
        }
        .delect-text {
          color: red;
          cursor: pointer;
        }
        .round-box {
          border: 1px solid #ccc;
          border-radius: 50px;
          text-align: center;
        }
      }
    }
  }

  .goods_img {
    width: 30px;
    height: 50px;
  }
}
:deep() {
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    width: 100% !important;
  }
  .el-tabs__item {
    width: 33% !important;
  }
  .is-active {
    background: #f6921e !important;
    color: #fff;
  }
}
</style>
